{% extends "base.html" %}

{% block title %}关于我们 - MyBlog{% endblock %}

{% block content %}
<div class="container my-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h2 class="mb-0">关于 MyBlog</h2>
                </div>
                <div class="card-body">
                    <div class="text-center mb-4">
                        <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
                             class="img-fluid rounded-circle" style="max-width: 200px;" alt="关于我们">
                    </div>

                    <h3 class="mb-3">我们的故事</h3>
                    <p class="lead">
                        MyBlog 是一个基于 Django 构建的个人博客平台，创建于 2023 年。我们的使命是为创作者提供一个简单、强大的平台来分享知识和想法。
                    </p>

                    <h3 class="mt-4 mb-3">技术栈</h3>
                    <ul class="list-group mb-4">
                        <li class="list-group-item">后端：Django 5.2</li>
                        <li class="list-group-item">前端：Bootstrap 5</li>
                        <li class="list-group-item">数据库：SQLite / PostgreSQL</li>
                        <li class="list-group-item">部署：Docker + Gunicorn</li>
                    </ul>

                    <h3 class="mt-4 mb-3">联系我们</h3>
                    <div class="d-flex justify-content-center">
                        <a href="#" class="btn btn-outline-primary me-2">
                            <i class="fab fa-twitter"></i> Twitter
                        </a>
                        <a href="#" class="btn btn-outline-primary me-2">
                            <i class="fab fa-github"></i> GitHub
                        </a>
                        <a href="#" class="btn btn-outline-primary">
                            <i class="fab fa-linkedin"></i> LinkedIn
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}